<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>特色功能点</title>
    <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
    <link rel="stylesheet" href="../css/public.css">
    <script src="../js/jquery-3.5.1.min.js"></script>
    <script src="../js/bootstrap4.5.min.js"></script>

    <style>

         /*https://fkwwhcm10.jz.fkw.com/?previewDemo=true   首页第三个模块  猫头鹰播放视频*/
        .imgText_mix_list_left {
            width: 100%;
            padding-left: 0;
            padding-right: 0;
            height: 450px;
            cursor: pointer;
            overflow: hidden;
            position: relative;
        }

        .imgText_mix_list_left img {
            width: 100%;
            height: 100%;
        }

        .imgText_mix_list_left img:nth-child(2) {
            display: inline-block;
            position: absolute;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            cursor: pointer;
            opacity: 0;

        }

        .imgText_mix_list_left:hover img:nth-child(2) {
            transition: 0.5s;
            opacity: 1;
        }

        .imgText_mix_list_left:hover img {
            transform: scale(1.05);
            transition: 0.5s;
        }

        .imgText_mix_list_right {
            padding: 40px 0 0 0;
        }

        .imgText_mix_list_right {
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
        }

        .imgText_mix_list_right h2 {
            font-size: var(--f_title);
            line-height: var(--l_title);
            color: var(--c_text);
        }

        .imgText_mix_list_right p {
            font-size: var(--f_text);
            line-height: var(--l_text);
            color: var(--c_text);
        }

        .imgText_mix_list_right button {
            margin-top: 32px;
            width: 182px;
            height: 42px;
            border-radius: 25px;
            border: none;
            background: var(--c_text);
            color: #fff;
            outline: none;
        }

        .imgText_mix_video_v {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            width: 100%;
            max-width: 960px;
            min-width: 375px;
            outline: none;
        }

        .imgText_mix_video {
            display: none;
        }

        .imgText_mix_video_v {
            z-index: 10;
        }

        .imgText_mix_curtain {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            z-index: 9;
        }

        @media(max-width:1200px) {
            .imgText_mix_list_left {
                height: 400px;
            }

            .imgText_mix_list_right {
                padding: 20px 0 0 0;
            }

            .imgText_mix_list_right {
                display: flex;
                flex-wrap: wrap;
            }

            .imgTgext_mix_list_right_top {
                width: 100%;
                display: flex;
                flex-wrap: nowrap;
                justify-content: space-between;
                margin-bottom: 28px;

            }

            .imgTgext_mix_list_right_bottom {
                width: 100%;
                display: flex;
                flex-wrap: nowrap;
                justify-content: space-between;
            }

            .imgText_mix_list_right h2 {
                width: 100%;
                text-align: center;
                margin-bottom: 28px;

            }

            .imgText_mix_list_right button {
                margin: 0 auto;
                margin-top: 32px;
                width: 182px;
                height: 42px;
                border-radius: 25px;
                border: none;
                background: var(--c_text);
                color: #fff;
                outline: none;
            }
        }

        @media(max-width:768px) {
            .imgTgext_mix_list_right_bottom {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                margin-bottom: 28px;
            }
            .imgTgext_mix_list_right_bottom>p{
                width: 100%;
                text-align: center;
                padding:  20px;
            }
            .imgText_mix_list_right button {
                margin-top: 0;
            }

        }
    </style>
</head>

<body>
    <div class="imgText_mix modular">
        <div class="imgText_mix_box  public_width">
            <div class="imgText_mix_list_left ">
                <img src="../images/imgText_mix_ying.jpg" alt="">
                <img src="../images/images2.jpg" alt="">
            </div>
            <div class="imgText_mix_list_right ">
                <h2>共同见证，如何把细节做到精致</h2>
                <div class="imgTgext_mix_list_right_top">
                    <p>6年</p>
                    <p>200+企业或单位</p>
                    <p>500+场活动</p>
                </div>
                <div class="imgTgext_mix_list_right_bottom">
                    <p>承“让品牌更具价值”的发展理念</p>
                    <p>致力于品牌价值的研究与实践</p>
                    <p>传播高价值的品牌咨询和策划</p>
                </div>
                <button onclick="javascript:window.location.href='../customer_list（客户列表）/customer_list1.html'">Learn
                    More</button>
            </div>
        </div>
        <div class="imgText_mix_video ">
            <video class="imgText_mix_video_v" src="http://0.ss.faisys.com/image/rimage/module/online_flv/Sun.mp4 " autoplay controls>
            </video>
        </div>
        <div class="imgText_mix_curtain"></div>
    </div>
    <script>
        $(function () {
            $(".imgText_mix_list_left").click(function () {
                $(".imgText_mix_video").toggle();
                $(".imgText_mix_curtain").css(
                    "display", "block"
                )
            })
            $(".imgText_mix_curtain").click(function () {
                $(".imgText_mix_video").toggle();
                $(this).toggle();
            })
        })
    </script>
</body>

</html>